﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminMTP.Master" AutoEventWireup="true" CodeBehind="Lesson_Plan.aspx.cs" Inherits="SQT.tracnghiem.Admin.Lesson_Plan" %>

<%@ Import Namespace="DataAccess" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <script src="../Scripts/javacuatui4.js"></script>
    <script src="../Scripts/tinymce/tinymce.min.js"></script>
    <script src="../Scripts/tinymce/plugins/furigana/plugin.min.js"></script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="main-admin" class="compo-content w3-light-grey">
        <header class="w3-padding w3-large w3-center w3-teal">SOẠN GIÁO ÁN</header>
        <div class="w3-hide">
            <audio id="audio_player"></audio>
        </div>
        <div class="w3-row w3-padding w3-border-bottom w3-border-teal">
            <select class="choose-lesson-plan w3-teal">
                <option value="0">Chọn bài giảng</option>
                <%var get_lesson = (from p in new TblLessonController().FetchAll() orderby p.LessonTitle ascending where p.LessonActive == true select p);
                  foreach (TblLesson lesson in get_lesson)
                  { %>
                <option value="<%=lesson.LessonId %>"><%=lesson.LessonTitle %></option>
                <%} %>
            </select>
            <a id="edit_lesson" class="w3-btn w3-teal" style="margin-bottom: 3px; display: none" title="Tùy chọn"><i class="fa fa-cogs"></i></a>
            <a class="w3-btn w3-teal thembaigiang" title="Thêm bài giảng" style="margin-bottom: 3px"><i class="fa fa-plus"></i></a>
            <a style="margin-bottom: 3px" href="../quan-ly/thu-vien" target="_blank" class="w3-btn w3-teal"><i class="fa fa-picture-o"></i>&nbsp;Mở thư viện</a>
        </div>
        <header class="w3-row w3-padding w3-center" id="lesson_name"></header>
        <div class="w3-row" id="lesson_content" style="display: none">
            <div class="w3-col l2 w3-animate-left">
                <div class="w3-row w3-padding">
                    <div onclick="openpartoflesson2(event,'lp1'),get_word()" class="lessonlink lesson-part w3-padding w3-center w3-card-2 w3-text-blue w3-hover-text-teal w3-white">
                        <i class="fa fa-language w3-xxxlarge"></i>
                        <br />
                        <span class="w3-large">Từ Vựng</span>
                    </div>
                </div>
                <div class="w3-row w3-padding">
                    <div onclick="openpartoflesson2(event,'lp2'),get_grammar()" class="lessonlink lesson-part w3-padding w3-center w3-card-2 w3-text-indigo w3-hover-text-teal w3-white">
                        <i class="fa fa-book w3-xxxlarge"></i>
                        <br />
                        <span class="w3-large">Ngữ Pháp</span>
                    </div>
                </div>
                <div class="w3-row w3-padding">
                    <div onclick="openpartoflesson2(event,'lp3'),get_reading()" class="lessonlink lesson-part w3-padding w3-center w3-card-2 w3-text-orange w3-hover-text-teal w3-white">
                        <i class="fa fa-microphone w3-xxxlarge"></i>
                        <br />
                        <span class="w3-large">Luyện Đọc</span>
                    </div>
                </div>
                <div class="w3-row w3-padding">
                    <div onclick="openpartoflesson2(event,'lp4'),get_listening()" class="lessonlink lesson-part w3-padding w3-center w3-card-2 w3-text-purple  w3-hover-text-teal w3-white">
                        <i class="fa fa-volume-up w3-xxxlarge"></i>
                        <br />
                        <span class="w3-large">Luyện Nghe</span>
                    </div>
                </div>
                <div class="w3-row w3-padding">
                    <div onclick="openpartoflesson2(event,'lp5'),get_talking()" class="lessonlink lesson-part w3-padding w3-center w3-card-2 w3-text-red w3-hover-text-teal w3-white">
                        <i class="fa fa-comments-o w3-xxxlarge"></i>
                        <br />
                        <span class="w3-large">Hội Thoại</span>
                    </div>
                </div>
                <div class="w3-row w3-padding">
                    <div onclick="openpartoflesson2(event,'lp6'),get_examp()" class="lessonlink lesson-part w3-padding w3-center w3-card-2 w3-text-green w3-hover-light-grey w3-white">
                        <i class="fa fa-clock-o w3-xxxlarge"></i>
                        <br />
                        <span class="w3-large">Bài Tập</span>
                    </div>
                </div>
            </div>
            <div id="lesson-part-detail" class="w3-col l10 w3-padding">
                <!--Từ vựng-->
                <div id="lp1" class="w3-responsive partoflesson w3-card-2 w3-white w3-animate-opacity">
                    <div class="lesson-detail" id="word">
                    </div>
                    <div class="w3-row w3-padding w3-center">
                        <a class="w3-btn w3-blue btn_add_word"><i class="fa fa-plus"></i>&nbsp;Thêm từ vựng</a>&nbsp;<a onclick="update_word()" class="w3-btn w3-blue"><i class="fa fa-refresh"></i>&nbsp;Cập nhật</a>&nbsp;<a onclick="saveChangeArea()" class="w3-btn w3-blue"><i class="fa fa-save"></i>&nbsp;Lưu thay đổi</a>&nbsp;<a onclick="deletevolcabulary()" class="w3-btn w3-blue"><i class="fa fa-trash"></i>&nbsp;Xóa từ vựng</a>
                    </div>
                    <div id="xoatuvung" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-blue" style="width: 32%">
                            <header class="w3-padding w3-center">
                                <p class="w3-large">Bạn có chắc chắn muốn xóa các từ này ?</p>
                            </header>
                            <div class="w3-row w3-padding w3-center">
                                <a class="w3-btn w3-blue w3-border w3-border-white btn_del_word"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>&nbsp;<a onclick="this.parentElement.parentElement.parentElement.style.display = 'none'" class="w3-btn w3-blue w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Ngữ pháp-->
                <div id="lp2" class="w3-padding partoflesson w3-card-2 w3-white w3-animate-opacity">
                    <div class="lesson-detail" id="grammar">
                    </div>
                    <div class="w3-row"><a onclick="document.getElementById('themnguphap').style.display = 'block'" class="w3-btn w3-indigo"><i class="fa fa-plus"></i>&nbsp;Thêm ngữ pháp</a><a onclick="sort_grammar()" class="w3-btn w3-indigo w3-margin-left"><i class="fa fa-sort-numeric-asc"></i>&nbsp;Sắp xếp thứ tự</a></div>
                    <div id="themnguphap" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-indigo" style="width: 30%">
                            <header class="w3-padding w3-center">
                                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                                <p class="w3-xlarge">Thêm mới ngữ pháp</p>
                            </header>
                            <div class="w3-padding w3-row">
                                <input id="txt_new_grammar" type="text" required="required" placeholder="Tên ngữ pháp" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_new_grammar" class="w3-btn w3-indigo w3-border w3-border-white"><i class="fa fa-save"></i>&nbsp;Lưu</a>
                            </div>
                        </div>
                    </div>
                    <div id="sapxepnguphap" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-indigo" style="width: 30%">
                            <header class="w3-padding w3-center">
                                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                                <p class="w3-xlarge">Sắp xếp ngữ pháp</p>
                            </header>
                            <div>
                                <table id="sort_grammar" class="volca-table w3-table w3-striped w3-bordered w3-white">
                                </table>
                            </div>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_accept_sort_grammar" onclick="btn_sort_grammar()" class="w3-btn w3-indigo w3-border w3-border-white"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>&nbsp;<a onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-btn w3-indigo w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                            </div>
                        </div>
                    </div>
                    <div id="xoanguphap" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-indigo" style="width: 32%">
                            <header class="w3-padding w3-center">
                                <p class="w3-large">Bạn có chắc chắn muốn xóa ngữ pháp này ?</p>
                            </header>
                            <div id="del_grammar_id" class="w3-hide"></div>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_del_grammar" class="w3-btn w3-indigo w3-border w3-border-white"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>&nbsp;<a onclick="this.parentElement.parentElement.parentElement.style.display = 'none'" class="w3-btn w3-indigo w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                            </div>
                        </div>
                    </div>
                    <div id="del_grammar_examle" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-indigo" style="width: 32%">
                            <header class="w3-padding w3-center">
                                <p class="w3-large">Bạn có chắc chắn muốn xóa ví dụ này ?</p>
                            </header>
                            <div class="w3-row w3-padding w3-center">
                                <div class="w3-hide" id="del_example_id"></div>
                                <a id="btn_del_grammar_example" class="w3-btn w3-indigo w3-border w3-border-white"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>&nbsp;<a onclick="this.parentElement.parentElement.parentElement.style.display = 'none'" class="w3-btn w3-indigo w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                            </div>
                        </div>
                    </div>
                    <div id="edit_grammar_example" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-indigo" style="width: 32%">
                            <header class="w3-padding w3-center">
                                <p class="w3-xlarge">Sửa ví dụ</p>
                            </header>
                            <div id="error_edit_grammar" class="w3-row w3-padding w3-center w3-text-white"></div>
                            <div class="w3-hide" id="grammar_example_count"></div>
                            <div class="w3-hide" id="grammar_example_id"></div>
                            <div class="w3-row w3-padding">
                                <input id="txt_edit_content" type="text" required="required" placeholder="Nhập ví dụ" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding">
                                <input id="txt_edit_mean" type="text" required="required" placeholder="Nhập Vietsub" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_accept_edit_example" class="w3-btn w3-indigo w3-border w3-border-white"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>&nbsp;<a onclick="this.parentElement.parentElement.parentElement.style.display = 'none'" class="w3-btn w3-indigo w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Luyện đọc-->
                <div id="lp3" class="w3-padding partoflesson w3-card-2 w3-white w3-animate-opacity">
                    <div class="lesson-detail" id="reading">
                    </div>
                </div>
                <!--Luyện nghe-->
                <div id="lp4" class="listen-plan partoflesson w3-card-2 w3-white w3-animate-opacity">
                    <div class="lesson-detail" id="listening">
                    </div>
                    <div id="themluyennghe" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-purple" style="width: 30%">
                            <header class="w3-padding w3-center">
                                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                                <p class="w3-xlarge">Thêm mới luyện nghe</p>
                            </header>
                            <div class="w3-padding w3-row">
                                <input id="txt_add_listening" type="text" required="required" placeholder="Tên luyện nghe" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_add_listening" class="w3-btn w3-purple w3-border w3-border-white"><i class="fa fa-save"></i>&nbsp;Lưu</a>
                            </div>
                        </div>
                    </div>
                    <div id="rename_Listening" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-purple" style="width: 30%">
                            <header class="w3-padding w3-center">
                                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                                <p class="w3-xlarge">Đổi tên luyện nghe</p>
                            </header>
                            <div id="rename_Listening_id" class="w3-hide"></div>
                            <div class="w3-padding w3-row">
                                <input id="txt_rename_Listening" type="text" required="required" placeholder="Tên luyện nghe" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_rename_Listening" class="w3-btn w3-purple w3-border w3-border-white"><i class="fa fa-save"></i>&nbsp;Lưu</a>
                            </div>
                        </div>
                    </div>
                    <div id="xoaluyennghe" class="w3-modal">
                        <div id="del_listen_id" class="w3-hide"></div>
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-purple" style="width: 33%">
                            <header class="w3-padding w3-center">
                                <p class="w3-large">Bạn có chắc chắn muốn xóa luyện nghe này ?</p>
                            </header>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_del_listening" class="w3-btn w3-purple w3-border w3-border-white"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>&nbsp;<a onclick="this.parentElement.parentElement.parentElement.style.display = 'none'" class="w3-btn w3-purple w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Hội thoại-->
                <div id="lp5" class="conversation-plan partoflesson w3-card-2 w3-white w3-animate-opacity">
                    <div class="lesson-detail" id="talking">
                    </div>

                    <div id="themhoithoai" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-red" style="width: 30%">
                            <header class="w3-padding w3-center">
                                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                                <p class="w3-xlarge">Thêm mới hội thoại</p>
                            </header>
                            <div class="w3-padding w3-row">
                                <input id="txt_add_talk_name" type="text" required="required" placeholder="Tên hội thoại" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_add_talking" class="w3-btn w3-red w3-border w3-border-white"><i class="fa fa-save"></i>&nbsp;Lưu</a>
                            </div>
                        </div>
                    </div>
                    <div id="rename_talking" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-purple" style="width: 30%">
                            <header class="w3-padding w3-center">
                                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                                <p class="w3-xlarge">Đổi tên luyện nghe</p>
                            </header>
                            <div id="rename_talking_id" class="w3-hide"></div>
                            <div class="w3-padding w3-row">
                                <input id="txt_rename_talking" type="text" required="required" placeholder="Tên luyện nghe" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_rename_talking" class="w3-btn w3-purple w3-border w3-border-white"><i class="fa fa-save"></i>&nbsp;Lưu</a>
                            </div>
                        </div>
                    </div>
                    <div id="xoahoithoai" class="w3-modal">
                        <div class="w3-hide" id="del_talk_id"></div>
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-red" style="width: 33%">
                            <header class="w3-padding w3-center">
                                <p class="w3-large">Bạn có chắc chắn muốn xóa hội thoại này ?</p>
                            </header>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_del_talking" class="w3-btn w3-red w3-border w3-border-white"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>&nbsp;<a onclick="this.parentElement.parentElement.parentElement.style.display = 'none'" class="w3-btn w3-red w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                            </div>
                        </div>
                    </div>
                    <div id="edit_talk_content" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-red" style="width: 32%">
                            <header class="w3-padding w3-center">
                                <p class="w3-xlarge">Sửa nội dung</p>
                            </header>
                            <div id="edit_talk_error" class="w3-row w3-padding w3-center w3-text-white"></div>
                            <div class="w3-hide" id="edit_talk_content_id"></div>
                            <div class="w3-row w3-padding">
                                <input id="txt_edit_talk_people" type="text" required="required" placeholder="Nhập nội dung" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding">
                                <input id="txt_edit_talk_content" type="text" required="required" placeholder="Nhập nội dung" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding">
                                <input id="txt_edit_talk_sub" type="text" required="required" placeholder="Nhập Vietsub" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_accept_edit_talk_content" class="w3-btn w3-red w3-border w3-border-white"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>&nbsp;<a onclick="this.parentElement.parentElement.parentElement.style.display = 'none'" class="w3-btn w3-red w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                            </div>
                        </div>
                    </div>
                    <div id="del_talk_content" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-red" style="width: 32%">
                            <header class="w3-padding w3-center">
                                <p class="w3-large w3-text-white">Bạn có chắc chắn muốn xóa nội dung này ?</p>
                            </header>
                            <div class="w3-row w3-padding w3-center">
                                <div class="w3-hide" id="del_talk_content_id"></div>
                                <a id="btn_del_talk_content" class="w3-btn w3-red w3-border w3-border-white w3-text-white"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>&nbsp;<a onclick="this.parentElement.parentElement.parentElement.style.display = 'none'" class="w3-text-white w3-btn w3-red w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!--Bài tập-->
                <div id="lp6" class="partoflesson w3-white w3-card-2 w3-padding">
                    <div class="lesson-detail" id="examp"></div>
                    <div id="thembaitap" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-green" style="width: 30%">
                            <header class="w3-padding w3-center">
                                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                                <p class="w3-xlarge">Thêm bài tập</p>
                            </header>
                            <div class="w3-padding w3-row">
                                <input id="txt_add_exam" type="text" required="required" placeholder="Tên bài tập" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_add_exam" class="w3-btn w3-green w3-border w3-border-white"><i class="fa fa-save"></i>&nbsp;Lưu</a>
                            </div>
                        </div>
                    </div>
                    <div id="rename_Exam" class="w3-modal">
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-green" style="width: 30%">
                            <header class="w3-padding w3-center">
                                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                                <p class="w3-xlarge">Đổi tên bài tập</p>
                            </header>
                            <div id="rename_Exam_id" class="w3-hide"></div>
                            <div class="w3-padding w3-row">
                                <input id="txt_rename_exam" type="text" required="required" placeholder="Tên bài tập" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
                            </div>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_rename_Exam" class="w3-btn w3-green w3-border w3-border-white"><i class="fa fa-save"></i>&nbsp;Lưu</a>
                            </div>
                        </div>
                    </div>
                    <div id="delete_Exam" class="w3-modal">
                        <div id="del_Exam_id" class="w3-hide"></div>
                        <div class="w3-modal-content w3-animate-top w3-card-8 w3-green" style="width: 33%">
                            <header class="w3-padding w3-center">
                                <p class="w3-large">Bạn có chắc chắn muốn xóa luyện nghe này ?</p>
                            </header>
                            <div class="w3-row w3-padding w3-center">
                                <a id="btn_del_exam" class="w3-btn w3-green w3-border w3-border-white"><i class="fa fa-check"></i>&nbsp;Đồng ý</a>&nbsp;<a onclick="this.parentElement.parentElement.parentElement.style.display = 'none'" class="w3-btn w3-green w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div id="thembaigiang" class="w3-modal">
            <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 45%">
                <header class="w3-padding w3-center">
                    <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                    <p class="w3-xlarge">Thêm Bài Giảng</p>
                </header>
                <div class="w3-padding w3-row">
                    <label class="w3-quarter">Tên bài</label><input class="w3-threequarter" id="txt_add_lesson" type="text" required="required" placeholder="Tên Bài" autofocus="autofocus" style="padding: 0.5%; color: black" />
                </div>
                <div class="w3-padding w3-row">
                    <label class="w3-col l3">Cấp quyền</label>
                    <div class="checkbox w3-threequarter">
                        <%var get_user_role = new TblUserRoleController().FetchAll();
                          foreach (TblUserRole user in get_user_role)
                          {
                        %>
                        <input type="checkbox" value="<%=user.RoleId %>" id="quyen<%=user.RoleId %>" class="quyen" /><label for="quyen<%=user.RoleId %>"><%=user.RoleName %></label>&nbsp;&nbsp;&nbsp;&nbsp;
                        <%} %>
                    </div>
                </div>
                <div class="w3-row w3-padding">
                    <label class="w3-quarter w3-padding-top">Đóng/Mở bài</label>
                    <div class="add_lesson w3-half w3-xlarge">
                        <i class="on fa fa-toggle-on fa-rotate-180 w3-text-red w3-animate-opacity off"></i>
                    </div>
                </div>
                <div class="w3-row w3-padding w3-center">
                    <a class="w3-btn w3-teal w3-border w3-border-white" id="btn_new_lesson"><i class="fa fa-save"></i>&nbsp;Lưu</a>
                    <a onclick="$('#thembaigiang').fadeOut()" class="w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                </div>
            </div>
        </div>
        <div id="chinhsuabai" class="w3-modal">
            <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 45%">
                <header class="w3-padding w3-center">
                    <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                    <p class="w3-xlarge">Chỉnh Sửa Bài Giảng</p>
                </header>
                <div id="edit_lesson_area">
                </div>
                <div class="w3-row w3-padding w3-center">
                    <a class="btn_edit_lesson w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-save"></i>&nbsp;Lưu</a>
                    <a class="btn_del_lesson w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-trash"></i>&nbsp;Xóa bài</a>
                    <a onclick="$('#chinhsuabai').fadeOut()" class="w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                </div>
            </div>
        </div>
        <div id="xoabai" class="w3-modal">
            <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 45%">
                <header class="w3-padding w3-center">
                    <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                    <p class="w3-xlarge">Bạn có chắc chắn muốn xóa bài này ?</p>
                </header>
                <div class="w3-row w3-padding w3-center">
                    <a class="btn_deleted_lesson w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-trash"></i>&nbsp;Xóa</a>
                    <a onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
                </div>
            </div>
        </div>
        <div id="success-modal" class="w3-row w3-animate-right" style="position: fixed; right: 25px; bottom: 20%; display: none">
            <div class="w3-teal w3-card-4 w3-center" style="padding: 20px; opacity: 0.9">
                <header class="w3-large">Đã lưu thành công&nbsp;<i class="fa fa-check"></i></header>
            </div>
        </div>
        <div id="media-collection" class="w3-modal" style="padding-top: 3%">
            <div class="w3-modal-content w3-animate-top w3-card-8" style="width: 1000px">
                <header class="w3-padding w3-center w3-teal">
                    <span class="w3-large">Thư viện</span>
                </header>
                <div class="w3-row w3-border-bottom w3-border-teal w3-card-2">
                    <div onclick="openmedia(event, 'pic')" class="media-link w3-third w3-center w3-border-right w3-border-teal w3-bottombar"><span><i class="fa fa-picture-o"></i>&nbsp;Hình ảnh</span></div>
                    <div onclick="openmedia(event, 'sou')" class="media-link w3-third w3-center w3-border-right w3-border-teal deactive"><span><i class="fa fa-volume-up"></i>&nbsp;Âm thanh</span></div>
                    <div onclick="openmedia(event, 'vid')" class="media-link w3-third w3-center w3-border-teal deactive"><span><i class="fa fa-video-camera"></i>&nbsp;Video</span></div>
                </div>
                <%var get_pic = (from p in new TblLibraryController().FetchAll().Where(x => x.LibraryType == 1) orderby p.LibraryId descending select p).Take(12);
                  var get_all_pic = new TblLibraryController().FetchAll().Where(x => x.LibraryType == 1).ToList();
                  int total_pic = get_all_pic.Count;
                  int count_pic = 0;
                %>
                <div id="pic" class="media-content">
                    <div id="pic_area" class="w3-row w3-padding">
                        <%
                            foreach (TblLibrary pic in get_pic)
                            {
                                count_pic++;
                                string date = DateTime.Parse(pic.LibraryUploadDate.ToString()).Day.ToString() + "/" + DateTime.Parse(pic.LibraryUploadDate.ToString()).Month.ToString() + "/" + DateTime.Parse(pic.LibraryUploadDate.ToString()).Year.ToString();
                                var get_upload = new TblManagerController().FetchAll().Where(x => x.ManagerId == pic.LibraryUploader).Single();
                        %>
                        <div data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="Tải lên ngày <%=date %> bởi <%=get_upload.FullName %>" class="media-item w3-quarter w3-center hvr-float">
                            <div class="w3-hide media-link">../Content/testdata/picture/<%=pic.LibraryLink %></div>
                            <div class="media-box w3-display-container">
                                <img class="media-item-content w3-display-bottommiddle" src="../Content/testdata/picture/<%=pic.LibraryLink %>" />
                            </div>
                            <span><%=pic.LibraryName %></span>
                        </div>
                        <%} %>
                    </div>
                    <%if (count_pic < total_pic)
                      { %>
                    <div id="load_more_img" class="w3-row w3-padding w3-center">
                        <div class="w3-hide total_media"><%=total_pic %></div>
                        <a id="btn_load_more_img" class="load-more-btn w3-btn w3-teal hvr-icon-spin">Xem thêm</a>
                    </div>
                    <%} %>
                </div>

                <div id="sou" class="media-content" style="display: none">
                    <div id="audio_area" class="w3-row w3-padding">
                        <%var get_audio = (from p in new TblLibraryController().FetchAll().Where(x => x.LibraryType == 2) orderby p.LibraryId descending select p);
                          var get_all_audio = new TblLibraryController().FetchAll().Where(x => x.LibraryType == 2).ToList();
                          int total_audio = get_all_audio.Count;
                          int count_audio = 0;
                          foreach (TblLibrary audio in get_audio)
                          {
                              count_audio++;
                              string date = DateTime.Parse(audio.LibraryUploadDate.ToString()).Day.ToString() + "/" + DateTime.Parse(audio.LibraryUploadDate.ToString()).Month.ToString() + "/" + DateTime.Parse(audio.LibraryUploadDate.ToString()).Year.ToString();
                              var get_upload = new TblManagerController().FetchAll().Where(x => x.ManagerId == audio.LibraryUploader).Single();
                        %>
                        <div data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="Tải lên ngày <%=date%> bởi <%=get_upload.FullName%>" class="media-item w3-quarter w3-center hvr-float">
                            <div class="w3-hide media-link">../Content/testdata/audio/<%=audio.LibraryLink %></div>
                            <video class="media-sound-item" src="../Content/testdata/audio/<%=audio.LibraryLink%>" poster="../Content/img/posterdefault.jpg" controls="controls"></video>
                            <span><%=audio.LibraryName%></span>
                        </div>
                        <%} %>
                    </div>
                    <%if (count_audio < total_audio)
                      { %>
                    <div class="w3-row w3-padding w3-center">
                        <div class="w3-hide total_media"><%=total_audio %></div>
                        <a id="btn_load_more_audio" class="load-more-btn w3-btn w3-teal hvr-icon-spin">Xem thêm</a>
                    </div>
                    <%} %>
                </div>
                <div id="vid" class="media-content" style="display: none">
                    <div id="video_area" class="w3-row w3-padding">
                        <%var get_video = (from p in new TblLibraryController().FetchAll().Where(x => x.LibraryType == 3) orderby p.LibraryId descending select p).Take(12);
                          var get_all_video = new TblLibraryController().FetchAll().Where(x => x.LibraryType == 3).ToList();
                          int total_video = get_all_video.Count;
                          int count_video = 0;
                          foreach (TblLibrary video in get_video)
                          {
                              count_video++;
                              string date = DateTime.Parse(video.LibraryUploadDate.ToString()).Day.ToString() + "/" + DateTime.Parse(video.LibraryUploadDate.ToString()).Month.ToString() + "/" + DateTime.Parse(video.LibraryUploadDate.ToString()).Year.ToString();
                              var get_upload = new TblManagerController().FetchAll().Where(x => x.ManagerId == video.LibraryUploader).Single();
                        %>
                        <div data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="Đăng ngày <%=date %> bởi <%=get_upload.FullName %>" class="media-item w3-quarter w3-center hvr-float">
                            <div class="w3-hide media-link">https://www.youtube.com/embed/<%=video.LibraryLink %></div>
                            <iframe width="100%" src="https://www.youtube.com/embed/<%=video.LibraryLink %>" frameborder="0" allowfullscreen></iframe>
                            <br />
                            <span><%=video.LibraryName %></span>
                        </div>
                        <%} %>
                    </div>
                    <%if (count_video < total_video)
                      { %>
                    <div class="w3-row w3-padding w3-center">
                        <div class="w3-hide total_media"><%=total_video %></div>
                        <a id="btn_load_more_video" class="load-more-btn w3-btn w3-teal hvr-icon-spin">Xem thêm</a>
                    </div>
                    <%} %>
                </div>
                <div class="media-option w3-row w3-padding w3-center w3-teal">
                    <div class="w3-half w3-center">
                        <label>Đường dẫn</label>&nbsp;<input id="library_link" type="text" class="w3-text-black" disabled="disabled" value="" />
                    </div>
                    <a onclick="document.getElementById('upload-media-modal').style.display = 'block'" class="w3-btn w3-teal w3-border"><i class="fa fa-upload"></i>&nbsp;Tải lên Hình ảnh/Âm thanh</a>
                    <a onclick="document.getElementById('post-video-modal').style.display = 'block'" class="w3-btn w3-teal w3-border"><i class="fa fa-film"></i>&nbsp;Đăng video</a>
                    <a class="w3-btn w3-teal w3-border" onclick="this.parentElement.parentElement.parentElement.style.display='none'">&nbsp;Đóng</a>
                </div>
            </div>
        </div>
        <div id="upload-media-modal" class="w3-modal">
            <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 500px">
                <header class="w3-padding w3-center">
                    <span class="w3-large">Tải lên Hình ảnh/Âm thanh</span>
                </header>
                <div class="w3-row w3-padding w3-center">
                    <input type="file" class="changewallpaper" name="fileUpload" id="fileUpload" />
                    <label for="fileUpload" class="w3-btn w3-border w3-teal"><i class="fa fa-folder"></i>&nbsp;Chọn tập tin</label>
                </div>
                <div class="w3-row w3-padding w3-center">
                    <video style="max-width: 100%; display: none" class="media-upload-sound" id="audio_upload" poster="../Content/img/posterdefault.jpg" controls="controls"></video>
                    <img id="img_upload" src="../Content/img/posterdefault.jpg" style="max-width: 100%; display: none" />
                </div>
                <div id="upload_name" class="w3-row w3-center" style="display: none">
                    <input type="text" id="txt_file_name" autofocus="autofocus" placeholder="Đặt tên cho tập tin" style="width: 50%" maxlength="30" class="class-editor w3-center" />
                </div>
                <div class="w3-row w3-padding w3-center">
                    <a id="btn_upload_file" class="w3-btn w3-teal w3-border"><i class="fa fa-upload"></i>&nbsp;Tải lên</a>
                    <a class="w3-btn w3-teal w3-border" onclick="this.parentElement.parentElement.parentElement.style.display='none'">&times;&nbsp;Hủy</a>
                </div>
            </div>
        </div>
        <div id="post-video-modal" class="w3-modal">
            <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 500px">
                <header class="w3-padding w3-center">
                    <span class="w3-large">Đăng video</span>
                </header>
                <div class="w3-row w3-padding">
                    <label class="w3-quarter">Đường dẫn</label><input id="txt_video_link" type="text" placeholder="Nhập đường dẫn của video" maxlength="30" class="class-editor w3-threequarter" />
                </div>
                <div class="w3-row w3-padding">
                    <label class="w3-quarter">Tên video</label><input id="txt_video_name" type="text" placeholder="Đặt tên cho video" maxlength="30" class="class-editor w3-threequarter" />
                </div>
                <div class="w3-row w3-padding w3-center">
                    <a class="w3-btn w3-teal w3-border" id="btn_upload_video"><i class="fa fa-film"></i>&nbsp;Đăng</a>
                    <a class="w3-btn w3-teal w3-border" onclick="this.parentElement.parentElement.parentElement.style.display='none'">&times;&nbsp;Hủy</a>
                </div>
            </div>
        </div>
    </div>
    <script src="../Ajax/JS/jquery-ui.js"></script>
    <script src="../Scripts/word_speak.js"></script>
    <script>window.onload = hidepartoflesson2()</script>
    <script>tinymce.remove("textarea");
        tinymce.init({
            selector: 'textarea',
            height: 200,
            width: '100%',
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen furigana ',
              'insertdatetime media table contextmenu paste code'
            ],
            fontsize_formats: "8px 10px 12px 14px 15px 16px 18px 20px 21px 22px",
            toolbar: 'fontsizeselect insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image furigana'
        });</script>
</asp:Content>
